<template>
  <a-drawer
    :footer="false"
    title="附件详情"
    :unmount-on-close="true"
    :visible="formVisible"
    ok-text="保存"
    width="60%"
    @cancel="handleCancel"
  >
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-fileName="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入文件名称"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #url="{ record }">
        <a-image
          class="list-image"
          v-if="['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(record.fileType)"
          width="30px"
          height="30px"
          :src="record.url"
        />
        <a-avatar v-else shape="square">{{ record.fileType }}</a-avatar>
      </template>
      <template #fileSize="{ record }">
        <div>
          <template v-if="record.fileSize / 1024 / 1024 / 1024 >= 1">
            {{ (record.fileSize / 1024 / 1024 / 1024).toFixed(2) }} GB
          </template>
          <template v-else-if="record.fileSize / 1024 / 1024 >= 1">
            {{ (record.fileSize / 1024 / 1024).toFixed(2) }} MB
          </template>
          <template v-else> {{ (record.fileSize / 1024).toFixed(2) }} KB </template>
        </div>
      </template>
    </ma-crud>
  </a-drawer>
</template>

<script lang="ts" name="AttactInfoTable" setup>
import { delAttactmentInfo, listAttactmentInfo } from "@/api/system/attact/info";
const formVisible = ref(false);
const crudRef = ref();
const currentRow = ref<any>({ attactId: undefined });

const crud = reactive({
  id: "id",
  pk: "id",
  api: listAttactmentInfo,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 100,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  delete: { api: delAttactmentInfo, auth: ["system:attactmentInfo:delete"], text: "删除", show: true },
  beforeRequest: (params: any) => (params.attactId = currentRow.value.attactId)
});

const columns = reactive([
  {
    title: "附件ID",
    dataIndex: "id",
    align: "center",
    hide: true
  },
  {
    title: "文件url",
    dataIndex: "url",
    align: "center"
  },
  {
    title: "文件名称",
    dataIndex: "fileName",
    search: true,
    align: "center"
  },
  {
    title: "文件类型",
    dataIndex: "fileType",
    align: "center"
  },
  {
    title: "文件大小",
    dataIndex: "fileSize",
    align: "center"
  },
  {
    title: "存储模式",
    dataIndex: "uploadType",
    align: "center",
    search: true,
    formType: "select",
    dict: {
      name: "sys_file_upload_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    title: "上传时间",
    dataIndex: "createTime",
    align: "center"
  }
]);

const show = async (attactId: number | string) => {
  formVisible.value = true;
  currentRow.value.attactId = attactId;
  await crudRef.value?.requestData();
};

const handleCancel = () => {
  formVisible.value = false;
};

defineExpose({
  show
});
</script>
